<template>
    <div class="bg login">
        <div class="login-title">
            <img src="../assets/fx-logo.png" alt="">
            <p>智慧肥乡新型城乡一体化服务平台</p>
        </div>
        <div class="login-box">
            <div class="login-box-title">
                <div class="login-box-line"></div>
                <div class="flex">
                    <span class="text1">Login
                        <span class="text2">登录</span>
                    </span>
                </div>
                <div class="login-box-line"></div>
            </div>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
                <el-form-item label="" prop="username">
                    <div class="input-row">
                        <img src="../assets/login/user-icon.png" alt="">
                        <el-input @keyup.enter.native="onEnter" placeholder="用户名" size="mini" v-model="ruleForm.username">
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="" prop="password">
                    <div class="input-row">
                        <img src="../assets/login/pwd-icon.png" alt="">
                        <el-input @keyup.enter.native="onEnter" type="password" placeholder="密码" size="mini" v-model="ruleForm.password">
                        </el-input>
                    </div>
                </el-form-item>
            </el-form>
            <div class="re-row">
                <el-checkbox v-model="checked">记住密码</el-checkbox>
                <!-- <a>登录遇到问题？</a> -->
            </div>
            <button class="login-btn" @click="login">登录</button>

        </div>
    </div>
</template>

<script>
import { login } from "../config/api";
import { setCookie, getCookie, removeCookie } from "../utils";
export default {
    name: "login",
    data() {
        return {
            checked: false,
            ruleForm: {
                username: "",
                password: ""
            },
            rules: {
                username: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "change"
                    }
                    // {
                    //     min: 3,
                    //     message: "长度在 3 到 5 个字符",
                    //     trigger: "change"
                    // }
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "change"
                    }
                    // {
                    //     min: 6,
                    //     message: "最少6位",
                    //     trigger: "change"
                    // }
                ]
            }
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        onEnter(e) {
            let { password, username } = this.ruleForm;
            if (password && username) {
                //用户名和密码都输入才校验。
                this.login();
            }
        },
        //初始化记住密码的时候填充用户名和密码
        init() {
            let str = getCookie("loginInfo");
            let isRemeber = getCookie("isRemeber");
            if (str) {
                let info = JSON.parse(str);
                if (isRemeber) {
                    this.ruleForm = info;
                    this.checked = true;
                } else {
                    this.checked = false;
                }
            }
        },
        //登录
        login(e, v) {
            // setCookie("token","eyJhbGciOiJIUzI1NiJ9.eyJ1c2VyTmFtZSI6IuW8oOS4iSIsInVzZXJJZCI6Il9Yeld5c0Y5ZUVlbS1ITHJGQ3lNbk5BMjAxOTA0MjAxNjIyMTQifQ.2FIMYTV79h-__gAI16PEbI-LMwNJQR8XuHtD6DNEtAc")
            this.$refs["ruleForm"].validate(valid => {
                if (valid) {
                    let { password, username } = this.ruleForm;

                    login({ username, password }).then((result = {}) => {
                        let data = result.data;
                        if (this.checked) {
                            setCookie("isRemeber", true);
                        } else {
                            removeCookie("isRemeber");
                        }
                        setCookie("loginInfo", {
                            password,
                            username
                        });
                        setCookie("userInfo", {
                            personId: data.personId,
                            type: data.type,
                            name: data.name || "无"
                        });
                        setCookie("department", data.department);
                        setCookie("token", data.token);
                        localStorage.menu = JSON.stringify(data.menu || []);
                        this.$router.push("/welcome");
                    });
                }
            });

            // this.$router.push("/welcome");
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../css/element-variables.scss";
.bg {
    height: 100%;
    width: 100%;
    // min-height: 550px;
    overflow: auto;
    background: url("../assets/login/login-bg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.login-title {
    display: flex;
    justify-content: center;
    align-items: center;
    img {
        height: 8vmin;
        // width: 12vmin;
    }
    p {
        font-family: TRENDS;
        font-size: 4.5vmin;
        color: #fff;
        margin-left: 20px;
    }
}
.login-box {
    min-height: 280px;
    min-width: 240px;
    height: 40vmin;
    width: 40vmin;
    background: #fff;
    margin-top: 6vmin;
    box-sizing: border-box;
    padding: 0 3.5vmin;
    font-size: 1.4vmin;
    &-title {
        padding-top: 2vmin;
        padding-bottom: 4vmin;
        display: flex;
        align-items: center;
    }
    &-line {
        flex: 1;
        border-bottom: 1px solid #dcdcdc;
    }
    .text1 {
        font-size: 3.4vmin;
        margin-left: 2vmin;
    }
    .text2 {
        font-size: 1.8vmin;
        margin: 0 2vmin;
    }
    .input-row {
        display: flex;
        position: relative;
        img {
            height: 2vmin;
            position: absolute;
            top: 50%;
            z-index: 999;
            margin-top: -1vmin;
            left: 1.5vmin;
        }
    }
    .login-btn {
        height: 5vmin;
        width: 100%;
        background: $--color-primary;
        color: #fff;
        &:active {
            opacity: 0.8;
        }
    }
    .re-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        a {
            color: #004293;
        }
        margin-bottom: 2.5vmin;
    }
}
</style>
<style>
.login .el-checkbox__label {
    color: #666;
    font-size: 12px;
}
</style>



